<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="/bootstraptable/bootstrap-table.min.css" rel="stylesheet">
    <style>
        .text_bottom_border {
            border: none;
            border-bottom: 1px solid black;
        }

        .text_no_border {
            border: none;
        }
    </style>
</head>
<body>
<div class="container">
    <div style="width: 1200px;margin: 0 auto;">
        <h5 style="color: #3e79b6">您正在做的业务是：生产管理--产品生产工序设计--制定产品生产工序设计单</h5>
    </div>
    <div class="panel panel-default">
        <form id="procedure_form" class="form-horizontal">
            <div class="panel-heading" style="text-align: right">
                <button type="button" id="add_btn" class="btn btn-default">添加工序</button>
                <button type="button" id="remove_btn" class="btn btn-default">删除工序</button>
                <button type="button" id="preview_btn" class="btn btn-default">预览</button>
                <button type="button" id="submit_btn" class="btn btn-default">确定</button>
                <button type="button" class="btn btn-default"><a href="javascript:history.back()"
                                                                 style="color: black">返回</a></button>

            </div>
            <div class="panel-body">
                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">产品名称：</label>
                        <div class="col-sm-8">
                            <input type="text" name="productName" id="productName"
                                   class="form-control text_no_border">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">产品编号：</label>
                        <div class="col-sm-8">
                            <input type="text" name="productId" id="productId"
                                   class="form-control text_no_border">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">设计人：</label>
                        <div class="col-sm-8">
                            <input type="text" name="designer" id="designer"
                                   class="form-control text_bottom_border"
                                   value="">
                        </div>
                    </div>
                </div>
                <!--物料明细表格-->
                <table class="table table-bordered table-striped" data-toggle="table" id="procedure_table">
                    <thead>
                    <tr>
                        <th data-field="a" data-formatter="formatChk">点选</th>
                        <th data-field="procedureName">工序名称</th>
                        <th data-field="procedureId">工序编号</th>
                        <th data-field="procedureDescribe">描述</th>
                        <th data-field="labourHourAmount" data-formatter="formatText" >工时数</th>
                        <th data-field="amountUnit" data-formatter="formatText1" >工时单位</th>
                        <th data-field="costPrice" data-formatter="formatText2">单位工时成本</th>
                         <th data-field="c">工时成本小计（元）</th>

                    </tr>
                    </thead>
                </table>

                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">登记人：</label>
                        <div class="col-sm-8">
                            <input type="text" name="register" id="register"
                                   class="form-control text_bottom_border"
                                   value="">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">登记时间：</label>
                        <div class="col-sm-8">
                            <input type="text" name="registerTime" id="registerTime" class="form-control"
                                   value="">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-6">
                        <label class="col-sm-4 control-label">设计要求：</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" id="moduleDescribe" name="moduleDescribe"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!--显示添加工序的模态框，查询所有的工序信息-->
<div class="modal fade" id="module_modal_procedure">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="model-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="module-body">
                <table id="module_procedure"></table>
            </div>
        </div>
    </div>
</div>


<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="/js/hAdmin.js?v=4.1.0"></script>
<!--<script type="text/javascript" src="/js/index.js"></script>-->

<!-- 第三方插件 -->
<script src="/js/plugins/pace/pace.min.js"></script>

<!--BootstrapTable-->
<script src="/bootstraptable/bootstrap-table.min.js"></script>
<script src="/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
    $(function () {
        $("#submit_btn").hide()
        $("#registerTime").val(fortime())
        let item = localStorage.getItem("id3");
        $.post("/design/file", {"id": item}, function (res) {
            if (res != null) {
                $("#productId").val(res.productId)
                $("#productName").val(res.productName)
            } else {
                alert("失败")
            }
        })
    })

    function fortime() {
        let date = new Date();
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        let d = date.getDate();
        let h = date.getHours();
        let mm = date.getMinutes();
        let s = date.getSeconds();
        return (y + '-' + add(m) + '-' + add(d) + ' ' + add(h) + ':' + add(mm) + ':' + add(s));
    }

    function add(m) {
        return m < 10 ? '0' + m : m
    }

    // 为"添加工序"按钮绑定点击事件，弹出模态框
    $("#procedure_form #add_btn").click(function () {
        // 弹出模态框
        $("#module_modal_procedure").modal("show")
        // 初始化dom刷新表格
        $("#module_procedure").bootstrapTable({
            // 请求方式
            method: "post",
            // 内容类型：如果请求方式是post，内容类型必须是application/x-www-form-urlencoded
            contentType: "application/x-www-form-urlencoded",
            // 请求路径
            url: '/Procedure/show',
            // 数据行交替样式
            striped: true,
            // 是否是服务器端分页：server表示服务器端，client表示前端分页
            sidePagination: 'server',
            // //初始化加载第一页
            // pageNumber: 1,
            // //是否分页
            // pagination: true,
            // // 单页记录数，页大小
            // pageSize: 2,
            // // 分页列表
            // pageList: [2, 5, 10, 20],
            //刷新按钮
            // showRefresh:true,
            // 请求参数
            queryParams: function (params) {
                let obj = {
                    // params.limit获取组件中的页大小
                    // params.offset获取请求数据的起始索引
                    // pageSize: params.limit,
                    // pageNo: (params.offset / params.limit) + 1,
                }
                return obj;
            },
            // 表格列标题
            columns: [{
                title: "工序编号",
                field: "procedureId",
            }, {
                title: "工序名称",
                field: "procedureName"
            }, {
                title: "工序描述",
                field: "procedureDescribe",

            }, {
                title: "添加",
                field: "",
                formatter: function (value, row, index) {

                    // js对象转化成json字符串
                    let json = JSON.stringify(row)

                    console.log(json)

                    let html = "<a href='javascript:addProcedure(" + json + ")'>添加</a>"
                    return html
                }

            }]
        })
    })

    function addProcedure(procedure) {
        console.log('aaa', procedure)
        // 获取工序表格的所有数据
        let data = $("#procedure_form #procedure_table").bootstrapTable("getData")
        // 标志位
        let index = -1
        for (let i = 0; i < data.length; i++) {
            if (procedure.id === data[i].id) {
                index = i
                break
            }
        }
if(index===-1){
        $("#procedure_form #procedure_table").bootstrapTable('append', procedure)
    }
    }


    $("#procedure_form #remove_btn").click(function(){
     let arr= $("#procedure_form #procedure_table :checkbox[name='detailsNumber']:checked")
   if(arr.length==0){
       alert("请选中要删除的工序")
       return
   }
        let arr1= $("#procedure_form #procedure_table :checkbox[name='detailsNumber']")
        let data = $("#procedure_form #procedure_table").bootstrapTable("getData")
        for(let i=arr1.length-1;i>=0;i--) {
            if (arr1[i].checked) {
                data.splice(i,1)
               $(arr1[i]).parent("td").parent().remove()
            }
        }
    })

    // 格式化"点选"单元格
    function formatChk(value, row, index) {
        return "<input type='checkbox' name='detailsNumber'>"
    }

    // 工时数
    function formatText(value, row, index) {
        return `<input type='text' class='form-control text_no_border' name='labourHourAmount' style='background-color: #a8e4ff'
                    onblur="changeAmount1(this)">`
    }
    // 工时单位
    function formatText1(value, row, index) {
        return `<input type='text' class='form-control text_no_border' name='amountUnit' style='background-color: #a8e4ff'
                    onblur="changeAmount2(this)">`
    }
    // 单位工时成本
    function formatText2(value, row, index) {
        return `<input type='text' class='form-control text_no_border' name='costPrice' style='background-color: #a8e4ff'
                    onblur="changeAmount3(this)">`
    }


    // 工时数
    function changeAmount1(param) {
        // 文本框的数量
        let val = $(param).val()
        // 获取文本框所在的行索引
        let index = $(param).parent("td").parent().index()

        // 获取物料明细表格的所有数据
        let data = $("#procedure_form #procedure_table").bootstrapTable("getData")
        // 修改对应对象的labourHourAmount
        data[index].labourHourAmount = parseInt(val)
    }
    // 工时数
    function changeAmount2(param) {
        // 文本框的数量
        // let val = $(param).val()
        // 获取文本框所在的行索引
        let index = $(param).parent("td").parent().index()

        // 获取物料明细表格的所有数据
        let data = $("#procedure_form #procedure_table").bootstrapTable("getData")
        // 修改对应对象的amountUnit
        data[index].amountUnit =$(param).val()
    }
    // 单位工时成本
    function changeAmount3(param) {
        // 文本框的数量
        let val = $(param).val()
        // 获取文本框所在的行索引
        let index = $(param).parent("td").parent().index()

        // 获取物料明细表格的所有数据
        let data = $("#procedure_form #procedure_table").bootstrapTable("getData")
        // 修改对应对象的costPrice
        data[index].costPrice = parseInt(val)
    }
    // 为"预览"按钮绑定点击事件
    $("#procedure_form #preview_btn").click(function () {
        $("#submit_btn").show()
        $("#add_btn").hide()
        $("#remove_btn").hide()
        $("#preview_btn").hide()

        // 获取所有的数据行对象
        let data = $("#procedure_form #procedure_table").bootstrapTable("getData")
        //工时数
        let labourHourAmount = $("#procedure_form #procedure_table input[name='labourHourAmount']")

        // 获取所有的工时单位
        let amountUnit = $("#procedure_form #procedure_table input[name='amountUnit']")

        // 获取所有的工时单位吧
        let costPrice = $("#procedure_form #procedure_table input[name='costPrice']")

        //单位工时成本
        let chks = $("#procedure_form #procedure_table :checkbox[name='detailsNumber']")
        for (let i=0; i<data.length; i++) {
            // 计算明细小计
            data[i].subtotal = data[i].labourHourAmount * data[i].costPrice
            // 更新小计单元格
            $(chks[i]).parent("td").siblings(":last").html(data[i].subtotal)
            // 更新点选复选框所在的单元格
            $(chks[i]).parent("td").html((i+1))


            $(labourHourAmount[i]).parent("td").html($(labourHourAmount[i]).val())
            $(amountUnit[i]).parent("td").html($(amountUnit[i]).val())
            $(costPrice[i]).parent("td").html($(costPrice[i]).val())

        }
    })
    // 为"确定"按钮绑定点击事件
    $("#procedure_form #submit_btn").click(function () {
        // 工序明细表格数据  格式：[{},{},...]
        let module_details=  $("#procedure_form #procedure_table").bootstrapTable("getData")
        let module_dto=
            {
                "productName":$("#procedure_form #productName").val(),
                "productId":$("#procedure_form #productId").val(),
                "designer":$("#procedure_form #designer").val(),
                "register":$("#procedure_form #register").val(),
                "registerTime":$("#procedure_form #registerTime").val(),
                "moduleDescribe":$("#procedure_form #moduleDescribe").val()
            }
        module_dto.details  =module_details
        $.ajax({
            url:"/ManufactureDesignProcedure/add",
            type:"post",
            data:JSON.stringify(module_dto),
            contentType:"application/json",
            success:function (data){
                location.href="/design/succeed"
            }
        })
    })


</script>

</body>

</html>